layui的layer弹出层和form表单 |
您所在的位置：网站首页 › layui 单选框点击 › layui的layer弹出层和form表单 |
layui的layer弹出层和form表单
文章目录
弹出层layerform表单增删改查所有代码
如果想用layui来完成增删改查，那么要会用弹出层和form表单这两个组件是必须的，所以今天就来介绍一些如何用layui完成基本的增删改查
弹出层layer
因为layui的特性，每次不管使用哪个组件，都要先把它的模块加载出来 比如我要用layer和form 那么就需要先这样定义,你的操作都是在这个里面进行，当然页可以一次性加载所有模块，详情去看api文档https://www.layui.com/doc/ layui.use(['layer','form'], function(){ })先看一下我们在一个点击事件下定义一个弹出层吧， $("#add").click(function(){ layer.open({ type: 1, title:"新增", area:['50%','50%'], btn: ['确定', '取消'], content: $("#window"), yes:function(index,layero){ } }); })我们用到的比较重要的几个参数 type:layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）,你用哪种，那么你想对应的内容的路径也要符合那种的格式，比如如果你用页面层你就不能用id去取你的弹出层，而必须定义一个页面 content也就是我们弹出层的内容路径了，根据你弹出层的类型来获取 area宽高：不定义虽然它默认是auto自动适应，但是可能不一定符合自己的样式 btn按钮：信息框模式时，btn默认是一个确认按钮，其它层类型则默认不显示，加载层和tips层则无效。定义的第一个按钮回调的是yes函数，后面定义的都是调用的no 我们要利用弹出层来实现增加和修改的页面，我在这里说一下比较重要的几个参数 form表单给表单绑定修改要回显的值 表单初始赋值：form.val(‘lay-filter的值’, object); table.on('tool(test)', function(obj){ var data = obj.data; layer.open({ type: 1 ,title: ['修改信息'] ,btn: ['确定', '取消'] ,shadeClose: true ,shade: 0 ,maxmin: true ,content:$("#window") ,success:function(layero,index){ $('#bid').val(data.bid); $('#bname').val(data.bname); $('#price').val(data.price); } }); });利用$.getJSON来把值传递到后台 $.getJSON( url [, data ] [, success(data, textStatus, jqXHR) ] ) url是必选参数，表示json数据的地址； data是可选参数，用于请求数据时发送数据参数； success是可参数，这是一个回调函数，用于处理请求到的数据。 表单的事件监听： form.on(‘event(过滤器值)’, callback); 例如提交事件：form.on(‘submit(*)’{ )} 下拉事件：form.on(‘select(filter)’, function(data){ } )} 增删改查所有代码图方便，没有把js和jsp分开了 //下拉列表 layui.use('element', function(){ var element = layui.element; }); //数据表格 layui.use(['table','layer','form'], function(){ var table = layui.table; var layer=layui.layer; var form=layui.form; var $=layui.$; var url=$("#ctx").val(); table.render({ elem: '#demo' ,url:'${pageContext.request.contextPath}/BookAction.action?methodName=list' ,method:'post' ,page:true ,cols: [[ {type:'checkbox',fixed:'left'} ,{field:'bid', title: 'ID'} ,{field:'bname', title: '书名'} ,{field:'price', title: '价格'} ,{field:'right', title: '操作', width:250,toolbar:"#barDemo"} ]] }); $("#add").click(function(){ layer.open({ type: 1, title:"新增", area:['50%','50%'], btn: ['确定', '取消'], content: $("#window"), yes:function(index,layero){ $.getJSON(url+'/BookAction.action?methodName=addBook',{ bid: $('#bid').val(), bname: $('#bname').val(), price: $('#price').val() },function(data){ //根据后台返回的参数，来进行判断 if(data>0){ layer.alert('增加成功',{icon:1,title:'提示'},function(i){ layer.close(i); layer.close(index);//关闭弹出层 $("#book")[0].reset()//重置form }) table.reload('demo',{//重载表格 page:{ curr:1 } }) } }); } }); }) //获取按钮 table.on('tool(test)', function(obj){ var data = obj.data; //获得当前行数据 var tr=obj.tr//活动当前行tr 的 DOM对象 if(obj.event === 'del'){ //删除 layer.confirm('确定删除吗？',{title:'删除'}, function(index){ //向服务端发送删除指令og $.getJSON(url+'/BookAction.action?methodName=del',{bid:data.bid}, function(ret){ layer.close(index);//关闭弹窗 table.reload('demo', {//重载表格 page: { curr: 1 // 重新从第 1 页开始 } }) }); layer.close(index); }); } else if(obj.event === 'edit'){ //编辑 layer.open({ type: 1 //Page层类型 ,skin: 'layui-layer-molv' ,area: ['380px', '270px'] ,title: ['编辑书本信息','font-size:18px'] ,btn: ['确定', '取消'] ,shadeClose: true ,shade: 0 //遮罩透明度 ,maxmin: true //允许全屏最小化 ,content:$("#window") //弹窗路径 ,success:function(layero,index){ $('#bid').val(data.bid); $('#bname').val(data.bname); $('#price').val(data.price); },yes:function(index,layero){ $.getJSON(url+'/BookAction.action?methodName=edit',{ bid: data.bid, bid: $('#bid').val(), bname: $('#bname').val(), price: $('#price').val() },function(data){ //根据后台返回的参数，来进行判断 if(data>0){ layer.alert('编辑成功',{icon:1,title:'提示'},function(i){ layer.close(i); layer.close(index);//关闭弹出层 $("#book")[0].reset()//重置form }) table.reload('demo',{//重载表格 page:{ curr:1 } }) } }); } }); } }); }) layui 书本编号 书本名称 书本价格 阳某的后台 控制台 商品管理 用户 其它系统 邮件管理 消息管理 授权管理 阳某 基本资料 安全设置 退了 所有商品 列表一 列表二 列表三 超链接 解决方案 列表一 列表二 超链接 云市场 发布商品 书名： 搜索 新增 编辑 删除 © layui.com - 底部固定区域Dao方法，这里用的是mvc框架 package com.xy.dao; import java.sql.SQLException; import java.util.List; import java.util.Map; import com.xy.util.JsonBaseDao; import com.xy.util.JsonUtils; import com.xy.util.PageBean; import com.xy.util.StringUtils; public class BookDao extends JsonBaseDao { /** * 查所有 * @param paMap * @param pageBean * @return * @throws InstantiationException * @throws IllegalAccessException * @throws SQLException */ public List list(Map paMap,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{ String sql="select * from t_mvc_book where true "; String bname = JsonUtils.getParamVal(paMap, "bname"); if(StringUtils.isNotBlank(bname)) { sql+=" and bname like '%"+bname+"%'"; } return super.executeQuery(sql, pageBean); } /** * 增加 * @param paMap * @return * @throws NoSuchFieldException * @throws SecurityException * @throws IllegalArgumentException * @throws IllegalAccessException * @throws SQLException */ public int add(Map paMap) throws NoSuchFieldException, SecurityException, IllegalArgumentException, IllegalAccessException, SQLException { String sql="insert into t_mvc_book(bid,bname,price) values(?,?,?)"; return super.executeUpdate(sql, new String[] {"bid","bname","price"}, paMap); } public int del(Map paMap) throws NoSuchFieldException, SecurityException, IllegalArgumentException, IllegalAccessException, SQLException { String sql="delete from t_mvc_book where bid=?"; return super.executeUpdate(sql, new String[] {"bid"}, paMap); } public int edit(Map paMap) throws NoSuchFieldException, SecurityException, IllegalArgumentException, IllegalAccessException, SQLException { String sql="update t_mvc_book set bname=?,price=? where bid=?"; return super.executeUpdate(sql, new String[] {"bname","price","bid"}, paMap); } }Action package com.xy.web; import java.sql.SQLException; import java.util.HashMap; import java.util.List; import java.util.Map; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import com.fasterxml.jackson.core.JsonProcessingException; import com.fasterxml.jackson.databind.ObjectMapper; import com.xy.dao.BookDao; import com.xy.util.JsonUtils; import com.xy.util.PageBean; import com.xy.util.ResponseUtil; import com.zking.framework.ActionSupport; public class BookAction extends ActionSupport { private BookDao bookDao=new BookDao(); public String list(HttpServletRequest req,HttpServletResponse resp) throws JsonProcessingException, Exception { PageBean pageBean=new PageBean(); pageBean.setRequest(req); List list = this.bookDao.list(req.getParameterMap(),pageBean); Map map=new HashMap(); map.put("data", list); map.put("code", 0); map.put("count", pageBean.getTotal()); ObjectMapper om=new ObjectMapper(); ResponseUtil.write(resp, om.writeValueAsString(map)); return null; } public int addBook(HttpServletRequest req,HttpServletResponse resp) throws JsonProcessingException, Exception { int add = bookDao.add(req.getParameterMap()); ObjectMapper om=new ObjectMapper(); ResponseUtil.write(resp, om.writeValueAsString(add)); return add; } public int del(HttpServletRequest req,HttpServletResponse resp) throws JsonProcessingException, Exception { int del = bookDao.del(req.getParameterMap()); ObjectMapper om=new ObjectMapper(); ResponseUtil.write(resp, om.writeValueAsString(del)); return del; } public int edit(HttpServletRequest req,HttpServletResponse resp) throws JsonProcessingException, Exception { req.setCharacterEncoding("utf-8"); resp.setCharacterEncoding("html/text;charset=utf-8"); int edit = bookDao.edit(req.getParameterMap()); ObjectMapper om=new ObjectMapper(); ResponseUtil.write(resp, om.writeValueAsString(edit)); return edit; } }最后增删查改也就完成了 |
【本文地址】
今日新闻 |
推荐新闻 |